<template>
  <el-dialog :title="title" :visible="showDialog" @close="closeFn">
    <el-form ref="tableData" :model="tableData" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input v-model="tableData.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="tableData.desc" type="textarea" placeholder="请输入介绍内容" />
      </el-form-item>
      <el-form-item label="封面" prop="image">
        <el-upload
          v-model="tableData.image"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <template>
        <el-row type="flex" justify="center">
          <el-button size="small" type="primary" @click="confirmFn">确定</el-button>
          <el-button size="small" @click="closeFn">取消</el-button>
        </el-row>
      </template>
    </el-form>
  </el-dialog>
</template>

<script>
// import { addcategory } from '@/api/interface/management'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      tableData: {
        title: '', // 标题
        desc: '', // 介绍
        image: '' // 封面
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入描述内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.tableData.id ? '编辑页面' : '添加页面'
    }
  },
  methods: {
    // 确定
    async confirmFn() {
      console.log('在这里')
      //   // 表单验证
      //   await this.$refs.tableData.validate()
      //   // 调用接口
      //   await addcategory(this.tableData)
      // 关闭弹窗
      this.closeFn()
    },
    // 上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 关闭弹窗
    closeFn() {
      // 清空数据
      this.tableData = {
        title: '', // 标题
        desc: '', // 介绍
        image: '' // 封面
      }
      // 清空校验规则
      this.$refs.tableData.resetFields()
      this.$parent.getmanagement()
      // 关闭弹窗
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>

</style>
